<script>
	import Switch from '@smui/switch';
	import FormField from '@smui/form-field';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher, onMount } from 'svelte';
	import Textfield from '@smui/textfield';
	import Checkbox from '@smui/checkbox';
	import Select, { Option } from '@smui/select';
	import { getValue } from '$utils/get';
	import HelperText from '@smui/textfield/helper-text';
	import { persistentWritable } from '$utils/persist';
	import { get } from 'svelte/store';

	export let item;
	export let form;
	export let options;

	export let hidden = true;
	let clock = 0;

	const dispatch = createEventDispatcher();

	const createTimeWaiting = (init = false) => {
		let time = persistentWritable('register:time', new Date().getTime());

		if (init) time.set(new Date().getTime());

		const animate = () =>
			requestAnimationFrame(() => {
				const cur = new Date().getTime();
				const record = get(time);
				if (record + 60 * 1000 > cur) {
					clock = 60 - Math.floor((cur - record) / 1000);
					animate();
				} else clock = 0;
			});

		animate();
		return time;
	};
	onMount(() => createTimeWaiting());

	const sendVerifyCode = () => {
		if (clock) return;
		createTimeWaiting(true);
		dispatch('sendVerifyCode');
	};
	const register = () => dispatch('register');
</script>

<section class="flex flex-col" style={'grid-column: span ' + item.span}>
	<div class="title line-height-36px font-size-16px font-bold color-gray-4">
		{getValue(item, 'label', '')}
	</div>
	{#if item.type === 'text'}
		<Textfield
			type="text"
			class="w-full"
			label={item.placeholder}
			variant="standard"
			bind:value={form[item.value]}
		/>
	{:else if item.type === 'username'}
		<div class="input-wrapper flex flex-row items-center h-fit" style="width: 100%">
			<input type="text" name="username" class="w-full" bind:value={form[item.value]} />

			<button class="relative flex-cc gap-10px color-gray-6 font-100" on:click={sendVerifyCode}>
				{#if clock}
					{clock}
				{:else}
					<span class="material-symbols-outlined font-size-18px!"> cached </span>
				{/if}
				<span class="font-size-16px!">Get verification code</span>
			</button>
		</div>
	{:else if item.type === 'common'}
		<input type="text" name="text" class="w-full" bind:value={form[item.value]} />
	{:else if item.type === 'password'}
		<div class="relative w-full h-fit">
			{#if !hidden}
				<input
					type="text"
					name="password"
					class="w-full"
					autocomplete="new-password"
					bind:value={form[item.value]}
				/>
				<button
					on:click={() => (hidden = true)}
					class="material-symbols-outlined color-gray-6 font-100! outline-none! bg-transparent! border-none! p-0 m-0 inline absolute font-100 right--1em top-50% -translate-50% font-size-24px!"
				>
					visibility
				</button>
			{:else}
				<input
					type="password"
					name="password"
					class="w-full"
					autocomplete="new-password"
					bind:value={form[item.value]}
				/>
				<button
					on:click={() => (hidden = false)}
					class="material-symbols-outlined color-gray-6 font-0! outline-none! bg-transparent! border-none! p-0 m-0 inline absolute right--1em top-50% -translate-50% font-size-24px!"
				>
					visibility_off
				</button>
			{/if}
		</div>
	{:else if item.type === 'textarea'}
		<Textfield
			type="text"
			class="w-full"
			variant="outlined"
			textarea={true}
			bind:value={form[item.value]}
		>
			<HelperText slot="helper" persistent={true}>{item.placeholder}</HelperText>
		</Textfield>
	{:else if item.type === 'checkbox'}
		<div
			class="w-full flex flex-row items-center"
			style={item.label === '' ? 'justify-content: space-between' : ''}
		>
			{#if item.checkBoxes}
				{#each item.checkBoxes as box}
					<FormField>
						<Checkbox bind:group={form[item.value]} value={box.label} />
						<span slot="label">{box.label}</span>
					</FormField>
				{/each}
			{/if}
		</div>
		{#if item.label === ''}
			<Button variant="raised" color="primary" class="w-full h-48px mt-2em" on:click={register}
				>submit</Button
			>
		{/if}
	{:else if item.type === 'switch'}
		<div class="flex flex-row items-center">
			<span class="color-blue-5 font-size-16px">NO</span>
			<Switch color="secondary" bind:checked={form[item.value]} />
			<span class="color-gray-5 font-size-16px">YES</span>
		</div>
	{:else if item.type === 'select'}
		<Select
			class="w-full!"
			id={item.value}
			variant="outlined"
			value={form[item.value]}
			menu$class="max-h-200px!"
			on:SMUISelect:change={(event) => (form[item.value] = event.detail.value)}
		>
			{#if item.options}
				{#each options[item.options] as i}
					<Option value={i.id}>{i.name}</Option>
				{/each}
			{/if}
		</Select>
	{/if}
</section>

<style lang="scss">
	input {
		border: 1px solid rgba(0, 0, 0, 0.36);
		border-radius: 4px;
		height: 56px;
		padding: 15px 12px 13px;
		font-size: 16px;
		color: #333;
		outline-color: transparent;
		transition: outline-color 0.3s linear;

		&:focus {
			outline-color: var(--mdc-theme-primary);
		}
	}

	.input-wrapper input {
		flex: 1;
		border-right: none;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	button {
		border: 1px solid rgba(0, 0, 0, 0.36);
		padding-left: 18px;
		padding-right: 18px;
		height: 56px;
		outline-color: transparent;
		transition: outline-color 0.3s linear;
		background-color: #e2e8f0;

		&:focus {
			background-color: #f1f5f9;
		}

		&:active {
			background-color: #f1f5f9;
		}
	}
</style>
